<template>
	<!-- 使用echarts（具体是哪种图形，取决于option的内容） -->

	<!-- <e-charts class="chart" :option="option" /> -->
	<!-- <e-charts class="chart1" :option="option" /> -->
	<e-charts class="chart1" :option="option1" />
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import {
		averageMaintenance,
		
	} from '@/api'

	// import {
	// 	useRoute
	// } from 'vue-router'
	// // const route = useRoute()
	const username = ref('')
	
	
	onMounted(() => {
username.value = localStorage.getItem('username')
		l1_1()
		// l1_2()
	})
	const option1 = ref({
		// title: {
		// 	text: '双柱图示例'
		// },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow' // 阴影指示器
			}
		},
		legend: {
			data: ['维保时长', '维修时长'],
			  textStyle: {
			        color: '#ffffff',      // 字体颜色
			        fontSize: 18        // 字体大小
			    }
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: [],
			 axisLabel: {
			        interval: 0,  // 强制显示所有标签
			        rotate: 30,  // 标签旋转角度，防止重叠
			        margin: 20,  // 标签与轴线距离
			        align: 'right',  // 对齐方式
			        verticalAlign: 'middle',
			        formatter: function(value) {
			            return value;  // 可以在这里自定义标签格式
			        }
			    }
		},
		yAxis: {
			type: 'value'
		},
		series: [{
				name: '维保时长',
				type: 'bar',
				data: [],
				barMinHeight: 1,  // 设置最小高度为1px
			},
			{
				name: '维修时长',
				type: 'bar',
				data: [],
				barMinHeight: 1,  // 设置最小高度为1px
			}
		]
	});
	
	
	const l1_1 = () => {
		 
		averageMaintenance(username.value).then(r => {
			console.log(r)
	
			const months = Object.keys(r.data.维保时长); // 月份数组
			const durations = Object.values(r.data.维保时长).map(v => parseFloat(v));
			const durations2 = Object.values(r.data.维修时长).map(v => parseFloat(v));
	

			console.log(123, months)
			console.log(123, durations)
	
			// 		const sortedMonths = [...months].sort((a, b) => {
	
			// 		  const normalizeDate = (str) => {
			// 		    const [year, month] = str.replace("月", "").split("-");
			// 		    return `${year}-${month.padStart(2, '0')}`;  
			// 		  };
	
			// 		  return new Date(normalizeDate(a)) - new Date(normalizeDate(b));
			// 		});
	
	
	
			option1.value.xAxis.data = months;
			option1.value.series[0].data = durations;
			option1.value.series[1].data = durations2;
			// console.log(option.value.xAxis[0].data)
			// console.log(option.value.series[0].data)
		})
	}
</script>

<style scoped>
	/* 我们必须给一个高度/宽度，不然echarts图表无法显示出来 */
	.chart {
		height: 260px;
		width: 430px;
		background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
		border-radius: 12px;
		box-shadow: 0 0 3px rgba(58, 123, 213, 0.8);
		position: relative;
		overflow: hidden;
	}

	.chart::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		/* background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.1) 75%, 
    transparent 75%, 
    transparent
  ); */
		background-size: 50px 50px;
		animation: moveWave 5s linear infinite;
	}

	@keyframes moveWave {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(25px, 25px);
		}
	}

	.chart1 {
		margin: 20px 0;
		height: 360px;
		width: 430px;
		align-items: center;
		/* background-color: pink; */
	}

	.rotating-image {
		animation: rotate 4s linear infinite;
		/* 其他样式 */
	}

	@keyframes rotateAnimation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.counter-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #0a1a35;
		/* 深蓝色背景 */
		width: 200px;
		padding: 20px;
		border-radius: 8px;
		font-family: Arial, sans-serif;
	}

	.circular-counter {
		position: relative;
		width: 120px;
		height: 120px;
		margin-bottom: 15px;
	}

	/* 外环（深蓝色） */
	.outer-ring {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 8px solid #0d2b5e;
		border-radius: 50%;
	}


	/* 内环（浅蓝色） */
	.inner-ring {
		position: absolute;
		width: 70%;
		height: 70%;
		top: 15%;
		left: 15%;
		/* background: #1a4b8c; */
		border-radius: 50%;
	}

	/* 中心数字 */
	.counter-value {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 32px;
		font-weight: bold;
	}

	/* 底部文字 */
	.counter-label {
		/* color: #00e6ff; */
		/* 青绿色 */
		font-size: 16px;
	}

	.elevator-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200px;
		height: 250px;
		/* background-color: #000; */
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		font-family: Arial, sans-serif;
	}

	.elevator-icon {
		position: relative;
		width: 150px;
		height: 150px;
		margin-bottom: 15px;
	}

	.outer-ring {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/elevator1.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}


	.elevator-container {
		/* position: relative; */
		width: 200px;
		height: 200px;
		/* margin: 0 auto; */
		/* background-color: #000; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.outer-ring {
		width: 150px;
		height: 150px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/elevator1.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.inner-ring {
		width: 93px;
		height: 93px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/elevator2.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		animation: rotate 8s linear infinite;
		/* opacity: 0.6; */
		/* 透明度设置，值范围0-1，0完全透明，1完全不透明 */

	}

	.inner-ring1 {
		width: 93px;
		height: 93px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/item2.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		animation: rotate 8s linear infinite;
		position: absolute;
		/* 添加绝对定位 */
		top: 15%;
		/* 居中定位 */
		left: 15%;
		transform: translate(-50%, -50%);
		/* 精确居中 */
	}

	.status-text {
		/* color: #0066ff; */
		font-size: 18px;
		font-weight: bold;
		margin-top: 10px;
		font-family: Arial, sans-serif;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}


	.status-text {
		color: #1E90FF;
		font-size: 18px;
		font-weight: bold;
		margin-top: 10px;
	}
</style>